<template>
  <div class="item-box">
    <!-- <div class="heard hw-box-style-flex hw-box-style-flex-r-center">
      <p class="heard-title1">组件设置</p> 
    </div> -->

    <div class="item-content" v-if="getUnitBanner.length > 0">
      <div class="random-box" @click="randomStyle">
        <i class="doorIcon">&#xe674;</i>
        <span>帮我选</span>
      </div>
      <t-collapse expand-icon-placement="right" :defaultExpandAll="true" :expandOnRowClick="false" :expandIcon="false">
        <t-collapse-panel :value="index" v-for="(item, index) in typeList" :key="index">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title1">{{ index + 1 >= 10 ? index + 1 : 0 + '' + (index + 1) }}</span>
              <span class="title2">{{ item.text }}</span>
            </div>
          </template>
          <template #default>
            <div class="default-box hw-flex-style-c-c" @click="setstyle(item, index)">
              <div class="default-shadow hw-flex-style-c-c">
                <div class="hw-click-cursor default-btn hw-flex-style-c-c" @click="setHome">更换组件</div>
              </div>
              <div class="img-boxs">
                <img :src="getImgInfo(item.type)" alt="" />
              </div>
            </div>
            <div
              class="numner-ipt"
              v-if="
                exbitsType && item.children.length < 1 && item.showpieceTotal > 0 && item.type >= 7 && item.type <= 11
              "
            >
              <span>展品数量</span>
              <t-input-number
                v-model="item.number"
                style="width: 100%"
                theme="column"
                :min="2"
                :max="6"
                @change="handleChange"
              />
            </div>
          </template>
        </t-collapse-panel>
      </t-collapse>
    </div>
    <div v-else class="no-module-style">
      <img src="https://static.jiyi.show/assets/img/no-module.png" alt="" />
      <span>暂无组件样式</span>
    </div>
    <SettingDialog
      :unitList="unitList"
      :value2="value2"
      :visible="visible"
      @close="close"
      @ok="ok"
      :showpieceTotal="showpieceTotal"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { cloneDeep } from 'lodash';
import { getUnitStyle, getUnitStyleType } from '@/utils/templateEdit';
import { ref, computed, watch, onMounted } from 'vue';
import { urls } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import SettingDialog from '../SettingDialog.vue';
import { useProjectStore, template17Store } from '@/store';
import { storeToRefs } from 'pinia';
import { getRandomModuleList } from '@/utils/templateEdit';

const store = useProjectStore();
const { styleInfo } = storeToRefs(store);
const getUnitBanner = ref([]);
const router = useRouter();
const route = useRoute();
const exbitsType = ref(false);
const indexs = ref(0);
const unitList = ref([]);
const tem17Store = template17Store();
// unitList.value = moduleType.Subunit[2];
const typeList = ref([]);
const showpieceTotal = ref(0); //展品数量
typeList.value = store.styleInfo.moduleList;
const visible = ref(false);
const value2 = ref(0);
const setHome = () => {
  // visible.value = true;
};
const init = () => {
  // console.log(route.meta.templateId);

  if (route.meta.templateId == 395740859879493) {
    exbitsType.value = true;
  }
  let list = getUnitStyle(route.meta.templateId);
  console.log(list, '7987896787687');

  getUnitBanner.value = list;

  // switch (route.meta.templateId) {
  //   case 410276336631877:
  //     getUnitBanner.value = SubunitList4;
  //     break;

  //   default:
  //     getUnitBanner.value = SubunitList;
  //     break;
  // }
};

onMounted(() => {
  init();
});
const randomStyle = () => {
  let arrInfo = cloneDeep(store.styleInfo);

  arrInfo.moduleList = getRandomModuleList(arrInfo.moduleList, route.meta.templateId, true);
  // console.log(arrInfo, 'break');

  store.setstyleInfo(arrInfo);
};
const getImgInfo = (e) => {
  // console.log(getUnitBanner.value, '+++');

  let res = getUnitBanner.value.findIndex((el: any) => {
    return el.id === e;
  });
  if (res !== -1) {
    return getUnitBanner.value[res].img + '?imageView2/3/format/webp';
  } else {
    return '';
  }
};
const pathBlank = () => {
  // /prijectMenu/plan
  router.push({ path: '/prijectMenu/plan', query: { projectId: localStorage.getItem('projectId') } });
};
const handleChange = (v, ctx) => {
  console.info('change', v);
  sessionStorage.setItem('tem1Num', v);
};
const close = () => {
  visible.value = false;
};
const ok = (e: number) => {
  typeList.value[indexs.value].type = e;
  visible.value = false;
  store.setstyleInfoModel(typeList.value);
};

const getChildType = (arr) => {
  let type = false;
  arr.forEach((element) => {
    if (element.children.length > 0) {
      type = true;
    }
  });
  return type;
};
const setstyle = (e: any, index: number) => {
  showpieceTotal.value = e.showpieceTotal;
  tem17Store.tem17Index = index;
  let arr = getUnitStyleType(route.meta.templateId, e, index);
  unitList.value = arr;
  indexs.value = index;
  value2.value = e.type;

  visible.value = true;

  console.log(value2.value);
};

watch(
  () => route.meta,
  () => {
    let list = getUnitStyle(route.meta.templateId);
    getUnitBanner.value = list;
  },
  { deep: true },
);
watch(
  () => styleInfo,
  () => {
    typeList.value = store.styleInfo.moduleList;
  },
  { deep: true },
);
window.onpopstate = function (event) {
  // 网址变化时的处理逻辑
  // init();
};
</script>

<style lang="less" scoped>
@import './index.less';

.default-box {
  position: relative;
  width: 100%;
  width: calc(100% - 40px);
  margin: 0 auto;
  height: 208px;
  padding: 12px 1px;
  border-radius: 4px;
  background: #f5f5f5;
  border: 1px solid #f0f0f0;

  :deep(.t-collapse-panel__content) {
    padding: 20px 0px !important;
    // padding-bottom: 0px !important;
  }
}

.img-boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  border-radius: 4px;

  img {
    border-radius: 4px;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.default-shadow {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 208px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.default-btn {
  width: 88px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #fff;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
}

.default-box:hover {
  .default-shadow {
    opacity: 1;
  }
}

.numner-ipt {
  display: flex;
  flex-direction: column;
  margin: 12px 0;
  width: 100%;
  max-width: 305px;
  margin-left: 20px;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    margin-bottom: 16px;
  }
}

:deep(.t-collapse-panel__content) {
  padding-bottom: 16px;
  padding-top: 8px !important;
}

:deep(.t-collapse-panel__wrapper .t-collapse-panel__content) {
  // padding-right: 16px;
  padding-left: 0px;
}

:deep(.t-collapse-panel) {
  // box-shadow: inset 0px -1px 0px 0px #f0f0f0;
}

.title2 {
  flex: 1;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

.item-content {
  padding-top: 0;
}

.title1 {
  width: 28px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 24px;
}

.title2 {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

img {
  object-fit: contain;
}
.item-box {
  height: 100%;
}
.no-module-style {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  img {
    width: 188px;
    margin-bottom: 32px;
  }
  span {
    color: rgba(0, 0, 0, 0.38);
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
:deep(.t-collapse-panel__header) {
  padding-top: 30px;
  padding-bottom: 0;
}
:deep(.t-collapse) {
  margin-top: -10px;
}
.random-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 16px;
  padding-bottom: 0;
  .doorIcon {
    color: rgba(0, 0, 0, 0.38);
    font-size: 24px;
    margin-right: 4px;
  }
  span {
    color: rgba(0, 0, 0, 0.38);
    font-size: 16px;
    line-height: 24px;
  }
}
.random-box:hover {
  .doorIcon {
    color: #e62b17;
  }
  span {
    color: #e62b17;
  }
}
</style>
